import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Detail from './Detail'

export default class Message extends Component {

    state = {
        messages: [
            {id:'01', title:'消息1'},
            {id:'02', title:'消息2'},
            {id:'03', title:'消息3'}
        ]
    }

    replaceShow = (id, title) => {
        // replace跳转 + params参数
        // this.props.history.replace(`/home/message/detail/${id}/${title}`)

        // replace跳转 + search参数
        // this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)

        // replace跳转 + state参数
        this.props.history.replace('/home/message/detail', {id,title})
    }

    pushShow = (id, title) => {
        // push跳转 + params参数
        // this.props.history.push(`/home/message/detail/${id}/${title}`)

        // push跳转 + search参数
        // this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)

        // push跳转 + state参数
        this.props.history.push('/home/message/detail', {id,title})
    }

    back = () => {
        this.props.history.goBack()
    }

    forward = () => {
        this.props.history.goForward()
    }

    render() {
        const {messages} = this.state 
        return (
            <div>
                <ul>
                    {
                        messages.map((messageObj) => {
                            return (
                                <li key={messageObj.id}>
                                    {/* 传递params参数 */}
                                    {/* <Link to={`/home/message/detail/${messageObj.id}/${messageObj.title}`}>{messageObj.title}</Link>
                                    &nbsp;<button onClick={() => {this.pushShow(messageObj.id, messageObj.title)}}>push查看</button>
                                    &nbsp;<button onClick={() => {this.replaceShow(messageObj.id, messageObj.title)}}>replace查看</button> */}

                                    {/* 传递search参数 */}
                                    {/* <Link to={`/home/message/detail?id=${messageObj.id}&title=${messageObj.title}`}>{messageObj.title}</Link> */}

                                    {/* 传递state参数 */}
                                    <Link replace to={{pathname:'/home/message/detail', state:{id:messageObj.id,title:messageObj.title}}}>{messageObj.title}</Link>

                                    &nbsp;<button onClick={() => {this.pushShow(messageObj.id, messageObj.title)}}>push查看</button>
                                    &nbsp;<button onClick={() => {this.replaceShow(messageObj.id, messageObj.title)}}>replace查看</button>
                                </li>
                            )
                        })
                    }
                </ul>
                <hr/>
                {/* 路由会给组件props中传递参数this.props.match.params */}
                {/* <Route path="/home/message/detail/:id/:title" component={Detail}></Route> */}

                {/* search参数无需声明接受  */}
                {/* <Route path="/home/message/detail" component={Detail}></Route> */}

                {/* state参数无需声明接受  */}
                <Route path="/home/message/detail" component={Detail}></Route>

                <button className="btn btn-primary" onClick={this.back}>后退</button>&nbsp;
                <button className="btn btn-primary" onClick={this.forward}>前进</button>
            </div>
        )
    }
}
